<template>
  <div class="applications-management-container">
    <div class="page-header">
      <div class="header-content">
        <h1>{{ pageTitle }}</h1>
        <p>{{ pageSubtitle }}</p>
      </div>
      <div class="header-actions">
        <el-button v-if="route.query.job" @click="goBack" plain>
          <el-icon><ArrowLeft /></el-icon>
          返回面试管理
        </el-button>
        <el-button @click="refreshData" :loading="loading">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
        <el-button type="primary" @click="exportData">
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon total">
          <el-icon><Files /></el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ totalApplications }}</h3>
          <p>总申请数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon pending">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ pendingApplications }}</h3>
          <p>待筛选</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon passed">
          <el-icon><Trophy /></el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ passedApplications }}</h3>
          <p>筛选通过</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon failed">
          <el-icon><Close /></el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ failedApplications }}</h3>
          <p>筛选未通过</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon interviewing">
          <el-icon><VideoCamera /></el-icon>
        </div>
        <div class="stat-content">
          <h3>{{ interviewingApplications }}</h3>
          <p>面试中</p>
        </div>
      </div>
    </div>

    <!-- 筛选和搜索 -->
    <div class="filters-section">
      <div class="filter-row">
        <div class="filter-item">
          <el-input 
            v-model="searchQuery" 
            placeholder="搜索候选人姓名、邮箱或职位"
            prefix-icon="Search"
            clearable
          />
        </div>
        
        <div class="filter-item">
          <el-select v-model="statusFilter" placeholder="筛选状态" clearable>
            <el-option label="全部" value="" />
            <el-option label="待筛选" value="pending" />
            <el-option label="筛选通过" value="screened_pass" />
            <el-option label="筛选未通过" value="screened_fail" />
            <el-option label="面试中" value="interviewing" />
            <el-option label="已完成" value="completed" />
          </el-select>
        </div>
        
        <div class="filter-item">
          <el-select v-model="recommendationFilter" placeholder="面试推荐" clearable>
            <el-option label="全部" value="" />
            <el-option label="强烈推荐" value="recommended" />
            <el-option label="有条件推荐" value="conditional" />
            <el-option label="暂不推荐" value="not_recommended" />
          </el-select>
        </div>
        
        <div class="filter-item">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </div>
      </div>
    </div>

    <!-- 申请列表 -->
    <div v-if="loading" class="loading-section">
      <el-skeleton :rows="5" animated v-for="n in 5" :key="n" />
    </div>
    
    <div v-else-if="filteredApplications.length > 0" class="applications-table">
      <el-table :data="filteredApplications" style="width: 100%" row-key="id">
        <el-table-column prop="candidate_name" label="候选人" width="150">
          <template #default="scope">
            <div class="candidate-info">
              <el-avatar :size="32" class="candidate-avatar">
                {{ scope.row.candidate_name.charAt(0) }}
              </el-avatar>
              <div class="candidate-details">
                <div class="candidate-name">{{ scope.row.candidate_name }}</div>
                <div class="candidate-email">{{ scope.row.candidate_email }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="job_title" label="申请职位" width="200">
          <template #default="scope">
            <div class="job-info">
              <div class="job-title">{{ scope.row.job_title }}</div>
              <div class="job-company">{{ scope.row.company || '公司名称' }}</div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="匹配度" width="120" sortable>
          <template #default="scope">
            <div class="match-score">
              <div class="score-number">{{ scope.row.job_fit_score }}%</div>
              <el-progress 
                :percentage="scope.row.job_fit_score" 
                :color="getScoreColor(scope.row.job_fit_score)"
                :stroke-width="4"
                :show-text="false"
              />
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="核心技能" width="200">
          <template #default="scope">
            <div class="skills-tags">
              <el-tag 
                v-for="skill in (scope.row.core_skills_matched || []).slice(0, 3)" 
                :key="skill" 
                type="success" 
                size="small"
              >
                {{ skill }}
              </el-tag>
              <span v-if="(scope.row.core_skills_matched || []).length > 3" class="more-skills">
                +{{ (scope.row.core_skills_matched || []).length - 3 }}
              </span>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="面试推荐" width="120">
          <template #default="scope">
            <el-tag 
              :type="getRecommendationType(scope.row.interview_recommendation)"
              size="small"
            >
              {{ getRecommendationText(scope.row.interview_recommendation) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag 
              :type="getStatusType(scope.row.status)"
              size="small"
            >
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="申请时间" width="150">
          <template #default="scope">
            <div class="apply-time">
              {{ formatDateTime(scope.row.applied_at) }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button 
                type="primary" 
                size="small"
                @click="viewApplicationDetail(scope.row)"
              >
                查看详情
              </el-button>
              
              <!-- 筛选通过 - 开始面试 -->
              <el-button 
                v-if="scope.row.status === 'screened_pass'"
                type="success" 
                size="small"
                @click="startInterview(scope.row)"
              >
                开始面试
              </el-button>
              
              <!-- 面试中 - 面试管理 -->
              <el-button 
                v-if="scope.row.status === 'interviewing'"
                type="warning" 
                size="small"
                @click="viewInterviewManagement(scope.row)"
              >
                面试管理
              </el-button>
              
              <!-- 已完成 - 查看报告 -->
              <el-button 
                v-if="scope.row.status === 'completed'"
                type="info" 
                size="small"
                @click="viewInterviewReport(scope.row)"
              >
                查看报告
              </el-button>
              
              <el-dropdown @command="handleCommand">
                <el-button size="small">
                  更多
                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ action: 'download', data: scope.row }">
                      <el-icon><Download /></el-icon>
                      下载简历
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'feedback', data: scope.row }" v-if="scope.row.status === 'screened_fail'">
                      <el-icon><MessageBox /></el-icon>
                      查看反馈
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'report', data: scope.row }" v-if="scope.row.status === 'completed'">
                      <el-icon><Document /></el-icon>
                      面试报告
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'result', data: scope.row }" v-if="scope.row.status === 'completed'">
                      <el-icon><TrendCharts /></el-icon>
                      面试结果
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'delete', data: scope.row }" divided>
                      <el-icon><Delete /></el-icon>
                      删除申请
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    
    <div v-else class="empty-state">
      <el-empty description="暂无申请数据" />
    </div>

    <!-- 申请详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="申请详情"
      width="800px"
      :close-on-click-modal="false"
    >
      <div v-if="selectedApplication" class="application-detail">
        <!-- 候选人基本信息 -->
        <div class="detail-section">
          <h4>候选人信息</h4>
          <div class="candidate-detail-info">
            <div class="info-row">
              <span class="label">姓名：</span>
              <span class="value">{{ selectedApplication.candidate_name }}</span>
            </div>
            <div class="info-row">
              <span class="label">邮箱：</span>
              <span class="value">{{ selectedApplication.candidate_email }}</span>
            </div>
            <div class="info-row">
              <span class="label">电话：</span>
              <span class="value">{{ selectedApplication.candidate_phone || '未提供' }}</span>
            </div>
          </div>
        </div>

        <!-- 申请信息 -->
        <div class="detail-section">
          <h4>申请信息</h4>
          <div class="application-detail-info">
            <div class="info-row">
              <span class="label">申请职位：</span>
              <span class="value">{{ selectedApplication.job_title }}</span>
            </div>
            <div class="info-row">
              <span class="label">匹配度得分：</span>
              <span class="value">{{ selectedApplication.job_fit_score }}%</span>
            </div>
            <div class="info-row">
              <span class="label">申请时间：</span>
              <span class="value">{{ formatDateTime(selectedApplication.applied_at) }}</span>
            </div>
            <div class="info-row">
              <span class="label">简历文件：</span>
              <el-button 
                type="primary" 
                size="small" 
                @click="downloadResume(selectedApplication)"
                v-if="selectedApplication.resume_file"
              >
                下载简历
              </el-button>
            </div>
          </div>
        </div>

        <!-- 技能匹配 -->
        <div class="detail-section" v-if="selectedApplication.core_skills_matched?.length > 0">
          <h4>核心技能匹配</h4>
          <div class="skills-tags">
            <el-tag 
              v-for="skill in selectedApplication.core_skills_matched" 
              :key="skill" 
              type="success"
            >
              {{ skill }}
            </el-tag>
          </div>
        </div>

        <!-- 软技能 -->
        <div class="detail-section" v-if="selectedApplication.soft_skills_detected?.length > 0">
          <h4>软技能检测</h4>
          <div class="skills-tags">
            <el-tag 
              v-for="skill in selectedApplication.soft_skills_detected" 
              :key="skill" 
              type="primary"
            >
              {{ skill }}
            </el-tag>
          </div>
        </div>

        <!-- 简历亮点 -->
        <div class="detail-section" v-if="selectedApplication.highlights?.length > 0">
          <h4>简历亮点</h4>
          <ul class="highlights-list">
            <li v-for="highlight in selectedApplication.highlights" :key="highlight">
              {{ highlight }}
            </li>
          </ul>
        </div>

        <!-- 教育背景和经验摘要 -->
        <div class="detail-section" v-if="selectedApplication.education_summary || selectedApplication.experience_summary">
          <h4>背景摘要</h4>
          <div class="summary-info">
            <div class="info-row" v-if="selectedApplication.education_summary">
              <span class="label">教育背景：</span>
              <span class="value">{{ selectedApplication.education_summary }}</span>
            </div>
            <div class="info-row" v-if="selectedApplication.experience_summary">
              <span class="label">工作经验：</span>
              <span class="value">{{ selectedApplication.experience_summary }}</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            type="primary" 
            @click="startInterview(selectedApplication)"
            v-if="selectedApplication && selectedApplication.status === 'screened_pass'"
          >
            开始面试
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { businessApi } from '@/services/api'
import { 
  Refresh,
  Download,
  Files,
  Clock,
  Trophy,
  Close,
  VideoCamera,
  ArrowDown,
  MessageBox,
  Delete,
  ArrowLeft,
  Document,
  TrendCharts
} from '@element-plus/icons-vue'

export default {
  name: 'ApplicationsManagementView',
  components: {
    Refresh,
    Download,
    Files,
    Clock,
    Trophy,
    Close,
    VideoCamera,
    ArrowDown,
    MessageBox,
    Delete,
    ArrowLeft,
    Document,
    TrendCharts
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    // 响应式数据
    const loading = ref(true)
    const applications = ref([])
    const searchQuery = ref('')
    const statusFilter = ref('')
    const recommendationFilter = ref('')
    const dateRange = ref('')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const totalCount = ref(0)
    const detailDialogVisible = ref(false)
    const selectedApplication = ref(null)
    
    // 计算属性
    const totalApplications = computed(() => applications.value.length)
    
    const pendingApplications = computed(() => 
      applications.value.filter(app => app.status === 'pending').length
    )
    
    const passedApplications = computed(() => 
      applications.value.filter(app => app.status === 'screened_pass').length
    )
    
    const failedApplications = computed(() => 
      applications.value.filter(app => app.status === 'screened_fail').length
    )
    
    const interviewingApplications = computed(() => 
      applications.value.filter(app => app.status === 'interviewing').length
    )
    
    const filteredApplications = computed(() => {
      let filtered = applications.value
      
      // URL参数筛选 - 根据job参数过滤特定职位的申请
      const jobParam = route.query.job
      if (jobParam) {
        console.log('URL参数job:', jobParam)
        filtered = filtered.filter(app => {
          // 尝试匹配job_posting字段（数字ID）或job_title（职位名称）
          const matchesJobId = app.job_posting && app.job_posting.toString() === jobParam
          const matchesJobTitle = app.job_title && app.job_title === jobParam
          console.log(`申请 ${app.id} 匹配情况:`, {
            job_posting: app.job_posting,
            job_title: app.job_title,
            jobParam: jobParam,
            matchesJobId,
            matchesJobTitle
          })
          return matchesJobId || matchesJobTitle
        })
        console.log('URL参数筛选后的申请数据:', filtered)
      }
      
      // 搜索筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(app => 
          app.candidate_name.toLowerCase().includes(query) ||
          app.candidate_email.toLowerCase().includes(query) ||
          app.job_title.toLowerCase().includes(query)
        )
      }
      
      // 状态筛选
      if (statusFilter.value) {
        filtered = filtered.filter(app => app.status === statusFilter.value)
      }
      
      // 推荐筛选
      if (recommendationFilter.value) {
        filtered = filtered.filter(app => app.interview_recommendation === recommendationFilter.value)
      }
      
      // 日期范围筛选
      if (dateRange.value && dateRange.value.length === 2) {
        const [startDate, endDate] = dateRange.value
        filtered = filtered.filter(app => {
          const appliedDate = new Date(app.applied_at).toISOString().split('T')[0]
          return appliedDate >= startDate && appliedDate <= endDate
        })
      }
      
      return filtered
    })

    // 页面标题计算属性
    const pageTitle = computed(() => {
      const jobParam = route.query.job
      if (jobParam && filteredApplications.value.length > 0) {
        const jobTitle = filteredApplications.value[0].job_title
        return `${jobTitle} - 申请管理`
      }
      return '申请管理'
    })

    const pageSubtitle = computed(() => {
      const jobParam = route.query.job
      if (jobParam && filteredApplications.value.length > 0) {
        const count = filteredApplications.value.length
        return `查看和管理该职位的 ${count} 个申请`
      }
      return '查看和管理所有候选人的申请'
    })
    
    // 方法
    const goBack = () => {
      router.push('/hr/interviews')
    }

    const refreshData = async () => {
      await loadApplications()
      ElMessage.success('数据已刷新')
    }
    
    const exportData = () => {
      // 导出数据逻辑
      ElMessage.info('导出功能开发中')
    }
    
    const formatDateTime = (dateString) => {
      if (!dateString) return '-'
      return new Date(dateString).toLocaleString('zh-CN')
    }
    
    const getScoreColor = (score) => {
      if (score >= 80) return '#67c23a'
      if (score >= 60) return '#e6a23c'
      return '#f56c6c'
    }
    
    const getRecommendationType = (recommendation) => {
      const typeMap = {
        'recommended': 'success',
        'conditional': 'warning',
        'not_recommended': 'danger'
      }
      return typeMap[recommendation] || 'info'
    }
    
    const getRecommendationText = (recommendation) => {
      const textMap = {
        'recommended': '强烈推荐',
        'conditional': '有条件推荐',
        'not_recommended': '暂不推荐'
      }
      return textMap[recommendation] || '待评估'
    }
    
    const getStatusType = (status) => {
      const typeMap = {
        'pending': 'warning',
        'screened_pass': 'success',
        'screened_fail': 'danger',
        'interviewing': 'primary',
        'completed': 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        'pending': '待筛选',
        'screened_pass': '筛选通过',
        'screened_fail': '筛选未通过',
        'interviewing': '面试中',
        'completed': '已完成'
      }
      return textMap[status] || '未知状态'
    }
    
    const viewApplicationDetail = (application) => {
      selectedApplication.value = application
      detailDialogVisible.value = true
    }
    
    const startInterview = (application) => {
      router.push(`/hr/interview-management/${application.id}`)
    }

    const viewInterviewManagement = (application) => {
      router.push(`/hr/interview-management/${application.id}`)
    }

    const viewInterviewReport = (application) => {
      router.push(`/hr/evaluation/${application.id}`)
    }
    
    const handleCommand = (command) => {
      const { action, data } = command
      
      switch (action) {
        case 'download':
          downloadResume(data)
          break
        case 'feedback':
          viewFeedback(data)
          break
        case 'report':
          viewInterviewReport(data)
          break
        case 'result':
          viewInterviewResult(data)
          break
        case 'delete':
          deleteApplication(data)
          break
      }
    }

    const viewInterviewResult = (application) => {
      router.push(`/candidate/interview-result?applicationId=${application.id}`)
    }
    
    const downloadResume = (application) => {
      if (application.resume_file) {
        // 创建下载链接
        const link = document.createElement('a')
        link.href = application.resume_file
        link.download = `${application.candidate_name}_简历.pdf`
        link.click()
      } else {
        ElMessage.warning('简历文件不存在')
      }
    }
    
    const viewFeedback = (application) => {
      // 显示筛选反馈
      ElMessage.info('查看反馈功能开发中')
    }
    
    const deleteApplication = async (application) => {
      try {
        await ElMessageBox.confirm(
          `确定要删除候选人 ${application.candidate_name} 的申请吗？`,
          '确认删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        
        // 调用删除API
        await businessApi.deleteJobApplication(application.id)
        
        // 从列表中移除
        const index = applications.value.findIndex(app => app.id === application.id)
        if (index > -1) {
          applications.value.splice(index, 1)
        }
        
        ElMessage.success('删除成功')
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除申请失败:', error)
          ElMessage.error('删除失败')
        }
      }
    }
    
    const handleSizeChange = (newSize) => {
      pageSize.value = newSize
      loadApplications()
    }
    
    const handleCurrentChange = (newPage) => {
      currentPage.value = newPage
      loadApplications()
    }
    
    // 加载申请数据
    const loadApplications = async () => {
      loading.value = true
      try {
        const response = await businessApi.getJobApplications()
        console.log('HR申请数据:', response)
        
        if (response.results) {
          applications.value = response.results
          totalCount.value = response.count || response.results.length
        } else if (Array.isArray(response)) {
          applications.value = response
          totalCount.value = response.length
        } else {
          applications.value = []
          totalCount.value = 0
        }
      } catch (error) {
        console.error('加载申请数据失败:', error)
        ElMessage.error('加载申请数据失败')
        
        // 使用模拟数据
        applications.value = [
          {
            id: 1,
            job_id: 1,
            candidate_name: '张三',
            candidate_email: 'zhangsan@example.com',
            candidate_phone: '13800138000',
            job_title: '前端开发工程师',
            company: '科技公司',
            resume_file: '/media/resumes/resume_1.pdf',
            job_fit_score: 85.5,
            core_skills_matched: ['JavaScript', 'Vue.js', 'React', 'Node.js'],
            soft_skills_detected: ['沟通能力', '团队合作', '学习能力'],
            education_summary: '计算机科学学士，985院校',
            experience_summary: '3年前端开发经验',
            highlights: ['有大型项目经验', '开源项目贡献者'],
            interview_recommendation: 'recommended',
            status: 'screened_pass',
            applied_at: '2024-01-16T10:00:00Z'
          },
          {
            id: 2,
            job_id: 2,
            candidate_name: '李四',
            candidate_email: 'lisi@example.com',
            candidate_phone: '13800138001',
            job_title: '全栈开发工程师',
            company: '科技公司',
            resume_file: '/media/resumes/resume_2.pdf',
            job_fit_score: 62.0,
            core_skills_matched: ['JavaScript', 'Python'],
            soft_skills_detected: ['学习能力'],
            education_summary: '计算机科学学士',
            experience_summary: '2年开发经验',
            highlights: ['有学习能力'],
            interview_recommendation: 'conditional',
            status: 'screened_fail',
            applied_at: '2024-01-15T14:30:00Z'
          }
        ]
        totalCount.value = applications.value.length
      } finally {
        loading.value = false
      }
    }
    
    onMounted(() => {
      loadApplications()
    })
    
    return {
      route,
      loading,
      applications,
      searchQuery,
      statusFilter,
      recommendationFilter,
      dateRange,
      currentPage,
      pageSize,
      totalCount,
      detailDialogVisible,
      selectedApplication,
      totalApplications,
      pendingApplications,
      passedApplications,
      failedApplications,
      interviewingApplications,
      filteredApplications,
      pageTitle,
      pageSubtitle,
      goBack,
      refreshData,
      exportData,
      formatDateTime,
      getScoreColor,
      getRecommendationType,
      getRecommendationText,
      getStatusType,
      getStatusText,
      viewApplicationDetail,
      startInterview,
      viewInterviewManagement,
      viewInterviewReport,
      viewInterviewResult,
      handleCommand,
      downloadResume,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.applications-management-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-content h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #606266;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.total { background: #909399; }
.stat-icon.pending { background: #e6a23c; }
.stat-icon.passed { background: #67c23a; }
.stat-icon.failed { background: #f56c6c; }
.stat-icon.interviewing { background: #409eff; }

.stat-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.stat-content p {
  color: #606266;
  margin: 0;
  font-size: 14px;
}

.filters-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-item {
  min-width: 200px;
}

.loading-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.applications-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.candidate-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.candidate-avatar {
  background: var(--el-color-primary);
  color: white;
  font-weight: 600;
}

.candidate-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.candidate-name {
  font-weight: 600;
  color: #303133;
}

.candidate-email {
  font-size: 12px;
  color: #909399;
}

.job-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.job-title {
  font-weight: 600;
  color: #303133;
}

.job-company {
  font-size: 12px;
  color: #909399;
}

.match-score {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.score-number {
  font-weight: 600;
  color: #303133;
}

.skills-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.more-skills {
  font-size: 12px;
  color: #909399;
}

.apply-time {
  font-size: 12px;
  color: #606266;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination-section {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.empty-state {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 详情对话框样式 */
.application-detail {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 8px;
}

.candidate-detail-info,
.application-detail-info,
.summary-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-row .label {
  font-weight: 600;
  color: #606266;
  min-width: 80px;
}

.info-row .value {
  color: #303133;
}

.highlights-list {
  margin: 0;
  padding-left: 20px;
}

.highlights-list li {
  color: #606266;
  margin-bottom: 4px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .applications-management-container {
    padding: 16px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-item {
    min-width: auto;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style> 